<template>
  <view class="list">
    <my-goods :item="item" v-for="(item,index) in list" :key="index" @click.native="goDetail(item)"></my-goods>
    <!--    <view class="item">
      <view class="left">
        <image :src="item.goods_small_logo || defaultImg" mode=""></image>
      </view>
      <view class="right">
        <view class="info">
          {{item.goods_name}}
        </view>
        <view class="price">
          <text>￥{{item.goods_price | formatMoney}}元</text>
        </view>
      </view>
    </view> -->
    <view class="finished" v-if="finished">
      没有更多了
    </view>
  </view>
</template>

<script>
  /*
  1:进入页面获取商品列表，存储并渲染
  2：实现上拉加载 
  3：实现下拉刷新
  */
  export default {
    data() {
      return {
        query: '',
        pagenum: 1,
        pagesize: 15,
        list: [],

        loading: false,
        finished: false

      };
    },
    // filters:字符加工，它内部不能用this,  只能用于v-bind与{{}}
    /*
    computed与watch与filter区别
    computed：依赖一个或者多个值产生一个新的值
              特点：缓存，依赖的值变化了，它产生的新值会实时变化               
    watch:侦听某个值的变化事件处理
          deep,immediate
    filter:字符加工
           内部不能直接用this,只能用于v-bind与{{}}
    */

    onLoad({
      key
    }) {
      this.query = key
      // console.log('列表接收 参数', key);
      this.getData()
    },
    async onPullDownRefresh() {
      /*
      下拉刷新
      1：配制 pages.json  enablePullDownRefresh:true
      2:加入  onPullDownRefresh方法
          方法内：
            还原数据
            调用接口请求第一页数据
            请求完：关闭下拉刷新 uni.stopPullDownRefresh()
      */
      // 还原所有数据
      this.pagenum = 1
      this.list = []
      this.loading = false
      this.finished = false
      // 调用接口请求第一页数据
      await this.getData()
      uni.stopPullDownRefresh()
    },
    onReachBottom() {
      console.log('onReachBottom');
      if (this.loading || this.finished) {
        return
      }
      this.pagenum++
      this.getData()

      /*
      van-list
         v-model:loading="是否处于加载中"
         finished:是否加载完成
         finished-text:加载完成文本内容
         @load="()=>{
           // 距离底部小于300时触发
           调用接口获取数据
             a:数据要累加
             b:修改下一页请求条件
             c:将loading改成false
             d:判断是否加载完成，如果完成，将finished=true
         }"
      
      */
    },
    methods: {
      async getData() {
        uni.showLoading({
          title: "加载中...."
        })
        this.loading = true
        const res = await uni.$http.get('/goods/search', {
          data: {
            query: this.query,
            pagenum: this.pagenum,
            pagesize: this.pagesize
          }
        })
        this.list.push(...res.message.goods)
        this.loading = false
        if (this.list.length >= res.message.total) {
          this.finished = true
        }
        uni.hideLoading()
        console.log('商品列表', res);

      },
      // 商品详情
      goDetail(item) {
        console.log(item);
        uni.navigateTo({
          url: '/pages/goods_detail/main?goods_id=' + item.goods_id
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .list {}

  .finished {
    text-align: center;
  }
</style>